const template_floor_style_1 = `
<div>
    <div class="floor">
        <!-- 楼层标题 -->
        <floor-title :title='title.index' :subTitle='title.text' :link='titleLink' :imgShow='false' @change="handleTitleChanged"></floor-title>
        <!-- 楼层内容区 -->
        <div class="floor_content">
            <!-- 左侧区域 -->
            <div class="floor_content_left">
                <!-- 左侧左区1/3长图片区 -->
                <div class="narrow">
                    <narrow-image :image="images.left_left_image" @change="handleLeftLeftImageChange" />
                    <!-- 超链接区 -->
                    <fast-link :flinks="links.left_left_links" @change="handleLeftLeftLinkChange" ></fast-link>
                </div>
                <div class="wide">
                    <wide-image :images="images.left_right_images" @change="handleLeftRightImagesChange" />

                    <!-- 品牌超链接区 -->
                    <brand-link :brandids="links.left_right_brands" @change="handleLeftRightBrandChange" ></brand-link>
                </div>
            </div>

            <!-- 右侧区域 -->
            <div class="floor_content_right border-editable" @click="setSelectCargos">
                <cargo-item :sku-id="item.sku_id" v-for="item in links.cargos" :key="item.sku_id" class="item" />
                <cargo-item :sku-id="0" v-for="item in 6" :key="item" class="item" v-if="!links.cargos.length" />
            </div>
        </div>
    </div>

    <!-- 页面弹出框 -->
    <div>
        <goods-searcher :visible="dialogVisible.cargos" @visible-change="handleGoodsSearchVisibleChange" @change="handleSelectedGoodsChange" />
    </div>
</div>
`

Vue.component('floor_style_1', {
    props: {
        config: {
            type: Object,
            required: true,
        },
    },
    data: function () {
        return {
            dialogVisible: { cargos: false },
            title: {
                index: '1F',
                text: 'NiuShop',
            },
            images: {
                left_left_image: {},
                left_right_images: [],
            },
            links: {
                left_left_links: [],
                left_right_brands: '',
                cargos: [],
            },
            titleLink: {
                url: '',
                content: '查看更多',
            },
        }
    },
    mounted() {},
    methods: {
        setTitle(type) {
            this.$prompt(type === 'index' ? '请输入楼层索引内容' : '请输入楼层标题', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            })
                .then(({ value }) => {
                    if (type === 'index') this.title.index = value
                    else this.title.text = value

                    this.onConfigChanged()
                })
                .catch(err => err)
        },
        setSelectCargos() {
            this.dialogVisible.cargos = true
        },
        // 左左侧链接改变
        handleLeftLeftLinkChange(leftleftLinks) {
            this.links.left_left_links = leftleftLinks
            return this.onConfigChanged()
        },
        handleLeftRightBrandChange(leftRightBrands) {
            this.links.left_right_brands = leftRightBrands
            return this.onConfigChanged()
        },
        handleLeftLeftImageChange(left_left_image) {
            this.images.left_left_image = left_left_image
            return this.onConfigChanged()
        },
        handleLeftRightImagesChange(leftRightImages) {
            this.images.left_right_images = leftRightImages
            return this.onConfigChanged()
        },
        handleSelectedGoodsChange(goods) {
            this.links.cargos = goods.map(item => {
                return { sku_id: item.sku_id }
            })

            return this.onConfigChanged()
        },
        handleGoodsSearchVisibleChange(visible) {
            this.dialogVisible.cargos = visible
        },
        handleTitleChanged(ojb) {
            const { title, subTitle, link } = ojb
            this.title.index = title
            this.title.text = subTitle
            this.titleLink = link
            this.onConfigChanged()
        },
        // 配置修改设置
        onConfigChanged() {
            const settings = {
                index: this.title.index,
                title: this.title.text,
                leftLeftImage: this.images.left_left_image,
                leftLeftLinks: this.links.left_left_links,
                leftRightImages: [],
                leftRightBrands: this.links.left_right_brands,
                rightCargos: [],
                titleLink: this.titleLink,
            }

            if (this.images.left_right_images && this.images.left_right_images.length > 0) {
                settings.leftRightImages = this.images.left_right_images.map(item => {
                    const { url, image } = item
                    return { url, image }
                })
            }

            if (this.links.cargos && this.links.cargos.length > 0) {
                settings.rightCargos = this.links.cargos.map(item => {
                    return { sku_id: item.sku_id }
                })
            }

            this.$emit('config-change', settings)
        },
    },
    watch: {
        config: function (curr) {
            this.images.left_left_image = curr.leftLeftImage || {}

            this.images.left_right_images = curr.leftRightImages || []

            // this.links.left_left_links = curr.leftLeftLinks
            this.$set(this.links, 'left_left_links', curr.leftLeftLinks || [])
            this.$set(this.links, 'left_right_brands', curr.leftRightBrands || '')

            this.links.cargos = curr.rightCargos || []
            this.links.cargos = this.links.cargos.map(item => {
                return { sku_id: item.sku_id }
            })

            this.tetleLink = curr.titleLink || {}
            this.title.index = curr.index || '1F'
            this.title.text = curr.title || 'NiuShop&NiuCloud'
        },
    },
    template: template_floor_style_1,
})
